<template>
  <div>
    <Header>
      <van-icon name="arrow-left" size="22" slot="left" />
      <span slot="center">提交订单</span>
    </Header>
    <div class="order">
      <div class="address-section" v-if="addressData">
        <p>{{ addressData.name }}&nbsp;&nbsp;{{ addressData.tel }}</p>
        <p>{{ addressData.address }}</p>
        <div>
          <van-icon class="arrow" name="arrow" size="20" />
        </div>
      </div>
      <div class="payment-section">
        <h3>支付方式: <span>支付宝</span></h3>
      </div>
      <div class="goods-section">
        <div class="goods-section-item" v-for="(item, index) in goodsData" :key="index">
          <div class="goods-img">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="goods-info">
            <h4>{{ item.title }}</h4>
            <div>￥{{ item.price }}</div>
            <div>X{{ item.count }}</div>
          </div>
        </div>
      </div>
    </div>
    <van-row class="order-bottom">
      <div class="left">
        <p>共{{ selectedCount }}件,应付<span>￥{{ totalPrice }}</span></p>
      </div>
      <div class="right" @click="orderSubmit">提交订单</div>
    </van-row>
  </div>
</template>
<script>
import Header from '@/components/common/Header.vue'
import { getAllAddressRequest } from '@/network/api/address'
import { mapState, mapGetters } from 'vuex'
import { payOrderRequest } from '@/network/api/pay'
export default {
  name: 'order',
  components: {
    Header
  },
  data() {
    return {
      addressData: null, // 地址信息
      goodsData: [] // 要购买的商品列表
    }
  },
  methods: {
    addressParse(address) {
      const arr = []
      address.forEach(item => {
        item.address = item.province === item.city ? item.province + item.county + item.addressDetail : item.province + item.city + item.county + item.addressDetail
        item.isDefault = item.isDefault_int === 1 ? true : false
        arr.push({
          id: item.id,
          name: item.name,
          tel: item.tel,
          address: item.address,
          isDefault: item.isDefault
        })
      })
      return arr.filter(item => item.isDefault)
    },
    getPayGoods(arr) {
      return arr.filter(item => item.selectedState)
    },
    async orderSubmit() {
      // 发送请求: 1. 把订单状态改为 [1]: 待支付, 后端调用支付sdk, 返回支付url
      // 2. 把数据从购物车删除
      const res = await payOrderRequest({
        orderId: this.$store.state.order.orderId,
        userId: this.$store.state.user.userId,
        goodsData: this.goodsData
      })
      location.href = res.result
    }
  },
  computed: {
    ...mapState('order', ['orderData']),
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['totalPrice', 'selectedCount'])
  },
  async created() {
    // 拿到地址信息
    const res = await getAllAddressRequest(this.$store.state.user.userId)
    let address = this.addressParse(res)
    this.addressData = address[0]
    // 拿到选中的商品信息
    this.goodsData = this.getPayGoods(this.cartList)
  },
}
</script>

<style scoped lang="less">
.order {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 10px;
  color: #333;

  .address-section {
    position: relative;
    width: 100%;
    background-color: #fff;
    margin: 10px 0;
    border-radius: 5px;

    .arrow {
      position: absolute;
      right: 5px;
      top: 35%;
    }

    p {
      margin: 10px;
    }

    p:nth-child(2) {
      font-size: 16px;
    }
  }

  .payment-section {
    width: 100%;
    padding: 12px 8px;
    background-color: #fff;
    border-radius: 5px;

    h3 {
      font-weight: normal;
      margin: 0;
    }
  }

  .goods-section {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    background-color: #fff;
    margin: 10px 0;

    .goods-section-item {
      display: flex;
      width: 100%;
      margin: 10px 0;

      .goods-img {
        width: 95px;
        height: 95px;
        margin-right: 15px;

        img {
          width: 100%;
        }
      }

      .goods-info {
        h4 {
          margin: 0;
          font-size: 16px;
          font-weight: normal;
          margin-bottom: 30px;
        }

        div:nth-of-type(1) {
          color: #d92c36;
          font-size: 16px;
        }

        div:nth-of-type(2) {
          margin-top: 6px;
          margin-right: 10px;
          color: #666;
          font-size: 12px;
        }
      }
    }
  }
}

.order-bottom {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  border-top: 1px solid #ddd;

  .left {
    width: 60%;
    background-color: #fff;

    p {
      font-size: 14px;
      margin: 0 20px;
      line-height: 50px;
    }

    span {
      font-size: 26px;
      color: #b0352f;
    }
  }

  .right {
    width: 40%;
    background-color: #b0352f;
    text-align: center;
    line-height: 50px;
    color: #fff;
  }
}
</style>

